<template>
  <div class="login-box">
    <div class="title">
      <div class="title-content">
        欢迎登录
      </div>
    </div>
    <!-- <div class="title">WELCOME TO ZHIYI SYSTEM</div> -->
    <!-- <div class="word">欢迎登录智易门锁管理系统</div> -->
    <div>
      <input
        type="text"
        id="username"
        v-model="user.username"
        autocomplete="off"
        @keyup.enter="login"
      />
      <img class="icon" src="../../assets/img/login/account-circle-line.png" alt="">
    </div>
    <div>
      <input
        type="password"
        id="password"
        v-model="user.password"
        @keyup.enter="login"
      />
      <img class="icon" src="../../assets/img/login/door-lock-line.png"></img>
    </div>
    <div>
      <input
        type="text"
        id="code-input"
        placeholder="请输入验证码"
        v-model="user.captcha"
      />
      <img id="code-pic" src="" alt="" @click="getCode" />
    </div>
    <div><button @click="login">登 录</button></div>
    <div>
      <a class="left" @click="$router.push('/ERR500')">忘记密码？</a>
      <a class="right" @click="register">注册账号</a>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      // TODO
      user: {
        captcha: "",
        password: "",
        username: "",
        uuid: "",
      },
    };
  },
  mounted() {
    this.getCode();
  },
  methods: {
    async login() {
      // 本地检验是否有输入账号密码
      if (this.user.username == "") {
        this.$message.info("请输入您的账号！");
      } else if (this.user.password == "") {
        this.$message.info("请输入您的密码！");
      } else if (this.user.captcha == "") {
        this.$message.info("请输入验证码！");
      } else {
        // 登录逻辑
        const res = await this.$_api.login(this.user);
        const msg = res.data.message;
        switch (msg) {
          case "账号或密码不正确":
            this.$message.info("账号或密码不正确，请重新输入！");
            this.user.username = "";
            this.user.password = "";
            this.user.captcha = "";
            this.getCode();
            break;
          case "验证码不正确":
            this.$message.info("验证码不正确！");
            this.user.captcha = "";
            this.getCode();
            break;
          case "成功":
            // TODO：设置cookie，存储用户名--后期会删除掉
            this.$_cookie.setCookie("user", this.user.username);
            console.log(this.$store)
            this.$store.commit("setUserName", this.user.username);
            let accessToken = res.data.data.token; //从后台返回的token
            localStorage.setItem("accessToken", accessToken); // 用localStorage缓存token值
            this.$message.success("登录成功！");
            this.$router.push("/");
            break;
          default:
            this.$message.error("请求超时，请重试！");
        }
      }
    },
    // 获取uuid
    getUuid(len, radix) {
      var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
        ""
      );
      var uuid = [],
        i;
      radix = radix || chars.length;
      if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
      } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
        uuid[14] = "4";
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | (Math.random() * 16);
            uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
          }
        }
      }
      return uuid.join("");
    },
    // 获取验证码
    getCode() {
      this.user.uuid = this.getUuid(20, 16);
      const img = document.getElementById("code-pic");
      img.src = `http://81.69.27.130/service-user/user_service/sys_login/captcha.jpg?uuid=${this.user.uuid}`;
    },
    register() {
      this.$router.push("/register");
    },
  },
};
</script>
<style lang="less" scoped>
.login-box {
  padding: 45px 30px;
  width: 380px;
}

.title{
  width: 100%;
  text-align: center;
  margin: 0 0 30px 0;
  &-content{
  display: inline-block;
  
  border-bottom: 3px #102962 solid;
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 5px;
  }
}
.word {
  font-size: 16px;
  color: #102962;
  margin-top: 16px;
  padding: 0;
}

input {
  /* background: #102962; */
  width: 318px;
  height: 44px;
  color: #102962;
  font-size: 16px;
  padding: 10px 0 10px 45px;
  /* margin-top: 5px; */
  border: none;
  border-bottom: 1.5px lightgray solid;
  /* border: 1px solid red; */

  transition: box-shadow 0.8s;
  

  &:focus{
    // border-bottom: 1.5px solid #102962;
  box-shadow: 0 0 6px #2d5bc7;
  border-radius: 3px;
  outline: none;
  }
}
.icon{
  position: relative;
  left: 10px;
  top: -35px;
  width: 25px;
  filter: invert(97%) sepia(0%) saturate(66%) hue-rotate(174deg) brightness(90%) contrast(88%);
}
#code-input {
  width: 168px;
  padding-left: 10px;
}
#code-input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  /* color: #999; */
  color: rgb(168, 168, 168);
}
#code-input::-moz-placeholder {
  /* Firefox 19+ */
  color: rgb(168, 168, 168);

}

#code-input:-ms-input-placeholder {
  /* IE 10+ */
  color: rgb(168, 168, 168);
}

#code-input:-moz-placeholder {
  /* Firefox 18- */
  color: rgb(168, 168, 168);
}
#code-pic {
  width: 150px;
  height: 40px;
}

input:focus,
button:focus {
  outline: none;
}

button {
  display: block;
  background: #2d5bc7;
  color: white;
  border: none;
  height: 44px;
  width: 318px;
  margin: 50px 0 30px 0;
  white-space: pre;

  /* css3动画 */
  transition: background 1s;
  -moz-transition: background 1s; /* Firefox 4 */
  -webkit-transition: background 1s; /* Safari and Chrome */
  -o-transition: background 1s; /* Opera */
}
button:hover {
  background: #487fff;
  cursor: pointer;
}
a {
  color: white;
}
a:hover {
  text-decoration: underline;
}
.left {
  float: left;
  color: #102962;
}
.right {
  float: right;
  color: #102962;
}
</style>
